<template> 
	<view class="bt_footer">   
		  <view  @click="gobar('index')" v-if="tranfState == 'index' && pageInfo.logo">
		  	<image :src="pageInfo.logo" style="width: 40px; height: 40px; border-radius: 100%; "></image>
		  </view> 
		  <view   @click="gobar('index')" class="cur1" v-else><text>首页</text> </view>
		  <view   @click="gobar('allGoods')"  :class="'cur2 '+ (tranfState == 'allGoods'?'cur':'')">
		  	<text>全部宝贝</text> 
		  </view> 
		  <view   @click="gobar('goodsClass')" :class="'cur3 '+ (tranfState == 'goodsClass'?'cur':'')" >
		  	<text>宝贝分类</text>  
		  </view> 
		  <view  @click="clickLink()" class="cur4" >
		  	<text>联系客服</text>  
		  </view>   
		  <userinfo v-if="user_options.toLogin" :options="user_options" ></userinfo>  
	</view>
</template>

<script>  
	var shop_common = require('../../../../utils/shop/common.js');
	var common = require('../../../../utils/common.js'); 
	export default {
		data() {
			return { 
				pageInfo:'', 
				user_options:{} 
			}
		}, 
		props:['tranfState'],
		onLoad(option) { 
			console.log(option,'option212222222')
		}, 
		watch:{  
			tranfState:function(newValue,oldValue){ 
			    this.active = this.tranfState
				console.log(this.active) 
			 }
		},
		mounted(){  
			var that = this
			common.post('Mall&a=store', {
				'store_id': that.$route.query.store_id
			}, data => {      
				that.pageInfo = data 
			})
		},
		methods: {
			clickLink(){
				var that = this
				uni.showActionSheet({
					title: '请选择联系客服的方式',
					// itemColor:'#ff0202',
					// cancelColor:'#666666',
				    itemList: ['请拨打' + that.pageInfo.phone, '在线客服'],
				    success: function (res) {
						if(res.tapIndex == 0){ 
							common.callPhone(that.pageInfo.phone) 
						}else if(res.tapIndex == 1){ 
							if(that.pageInfo.kefu == '-1'){ 
								uni.showModal({
								    title: '提示',
								    content: '你没有登录，要去登录吗？',
								    success: function (res) {
								        if (res.confirm) {
								            console.log('用户点击确定');
											that.user_options = {
												toLogin: true
											};
								        } else if (res.cancel) {
								            console.log('用户点击取消');
								        }
								    }
								});
								
							}else{
								window.location.href = that.pageInfo.kefu
							}
							 
						}
				        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				}); 
			},
			gobar(option){  
				var store_id =''
				var _this = this
				shop_common.getStorage('store_id').then(data=>{ 
					console.log(data)
					store_id = data
					console.log(store_id,'store_id')
					if(_this.tranfState !== option){
						window.location.href = option+"?store_id="+store_id
					} 
					// uni.navigateTo({
					// 	url:option+"?store_id="+store_id
					// })
					console.log('bar')
				})
				
				
			}
			 
		}
	}
</script>

<style>
 
	.bt_footer{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%; 
		font-size: 12px;
		background: #fff;
		padding: 5px 10px 5px 10px;
		color: #333;
		z-index: 99;
		text-align: center;
		box-sizing: border-box;
	}
	.bt_footer .cur{
		color: #fd5e01;
	}
	.bt_footer .cur1 text{
		background: url(../../../../static/mall/icon_bar1.png) top center no-repeat;
		background-size: 20px 20px;
	}
	.bt_footer .cur2 text{
		background: url(../../../../static/mall/icon_bar2.png) top center no-repeat;
		background-size: 20px 20px;
	}
	.bt_footer .cur3 text{
		background: url(../../../../static/mall/icon_bar3.png) top center no-repeat;
		background-size: 20px 20px;
	}
	.bt_footer .cur4 text{
		background: url(../../../../static/mall/icon_bar4.png) top center no-repeat;
		background-size: 20px 20px;
	}
	.bt_footer .cur1.cur text{
		background: url(../../../../static/mall/icon_bar1hover.png) top center no-repeat;
		background-size: 20px 20px;
	}
	.bt_footer .cur2.cur text{
		background: url(../../../../static/mall/icon_bar2hover.png) top center no-repeat;
		background-size: 20px 20px;
	}
	.bt_footer .cur3.cur text{
		background: url(../../../../static/mall/icon_bar3hover.png) top center no-repeat;
		background-size: 20px 20px;
	}
	.bt_footer view{
		width: 25%;
		display: inline-block;
	}
	.bt_footer text{
		display: block;
		margin: 0 auto;
		text-align: center;   
		padding-top: 22px; 
	}
	.uni-actionsheet .uni-actionsheet__menu .uni-actionsheet__title{
		color: red!important;
	}
</style>
